<template>
    <el-card class="introduce text-center">
        
        <header class="text-center mb-8">开通{{type}}服务</header>
        <el-form label-width="80px" label-position="left" :class="introduce.length < 2 ? 'px-0' : 'pd'" class="w-1/2 inline-block introduce-edit__item">
            <el-form-item label="申请说明">
                <el-input type="textarea" rows="5" v-model="form.desc" placeholder="请输入申请说明"></el-input>
            </el-form-item>


            <el-form-item label="联系方式">
                <el-input v-model="form.telephone" placeholder="请输入联系方式"></el-input>
            </el-form-item>
        </el-form>

        <p style="color:#B8C2CC;margin-bottom:25px;">申请开通后，将有专人为您处理，请耐心等候</p>
        <el-button class="btn-primary" @click="sendData()">申请开通</el-button>
        <!-- 富文本 -->
        <!-- <tinymce v-model="form.introduction" :config="{}"></tinymce> -->

        <!-- <div class="flex justify-between items-center introduce__control" :class="[isCollapse ? 'is-collaspe' : 'no-collaspe']">
            <div style="margin:auto;">
                <el-button class="btn-primary" @click="postData()">保存</el-button>
                <el-button type="info" @click="$router.go(-1)">取消</el-button>
            </div>
        </div> -->
    </el-card>
</template>

<script>

    import {
        Cascader,
        Checkbox,
        Select,
        Form,
        FormItem
    } from 'element-ui';
    import {
        getCategorise
    } from '../../config/Cache';
    import debounce from 'lodash/debounce';

    export default {
        components: {
       
            
            ElForm: Form,
            ElFormItem: FormItem,
        },
        data() {
            return {
                form: null,
                introduce: [],
            };
        },
        watch: {
            '$route' (val, oldVal) {
                this.createForm();
                this.getData(this.type)
                
            }
        },
        computed: {
            type(){
                return this.$route.path.includes('index') ? '首页展示': ( this.$route.path.includes('filter') ? '筛选页展示': '类目排序' ) 
            }
        },
        methods: {
            getData(type){

                API.get('manage/advertisement?type='+type).then(res=>{
                    console.log(res)
                    if(res.length){
                        this.form.desc = res[0].desc
                        this.form.telephone = res[0].telephone
                    }
                    
                }).catch(err => {
                     Ele.$message.error('操作失败！');
                })
                .finally(() => {
                    //this.dialogVisible = false;
                    
                });
            },
            sendData(){
                this.form.type = this.$route.path.includes('index') ? '首页展示': ( this.$route.path.includes('filter') ? '筛选页展示': '类目排序' ) 
                API.post('manage/advertisement',this.form).then(res=>{
                    Ele.$message.success('操作成功！');
                }).catch(err => {
                    Ele.$message.error('操作失败！');
                })
                .finally(() => {
                    //this.dialogVisible = false;
                    
                });
            },
            createForm() {
                this.form = {
                    desc: '', //申请说明
                    telephone: '', //联系方式
                };
            },

        },
        mounted() {},
        created() {
            this.createForm();
            // this.getData();
        },
        beforeRouteEnter(to, from, next) {
            console.log(to)
            next(vm => {
                // let type = null
                // if(to.name == 'AD.Filter'){
                //     type = '筛选页展示'
                // }
                // if(to.name == 'AD.Index'){
                //     type = '首页展示'
                // }
                // if(to.name == 'AD.Category'){
                //     type = '类目排序'
                // }
                //  vm.getData(type);
            });
        }
    };

</script>

<style lang="scss">
    .introduce {
        .el-card__body {
            padding-bottom: 80px;
        }

        header {
            color: #333;
            font-size: 20px;
        }

        &__upload {
            max-height: 250px;
            margin: 18px auto 12px;

            .default {
                color: #999;
                height: 150px;
                font-size: 14px;
                padding-top: 30px;
                background-color: #ececec;

                .iconfont {
                    font-size: 40px;
                }
            }

            .active {
                // height: 500px;
                text-align: center;

                .delete-icon {
                    position: absolute;
                    right: -15px;
                    top: -12px;
                    background: #fff;
                    border-radius: 50%;

                    .el-icon-error {
                        color: #666;
                        font-size: 30px;
                    }
                }
            }
        }
        .el-input__inner {
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid #f0f0f0;
        }
        &__item {
            &.pd {
                padding: 20px 40px;
                vertical-align: top;
            }
        }


        &__control {
            position: fixed;
            bottom: 21px;
            background: #fff;
            padding: 1rem;
            transition: all .6s;

            &.is-collaspe {
                width: calc(100% - 130px);
                left: 110px;
            }

            &.no-collaspe {
                width: calc(100% - 330px);
                left: 300px;
            }
        }
    }

</style>
